<template>
    <view class="content" @tap.stop="$refs.uniselect.close()">
        <!-- 头部 -->
        <view class="bg">
            <u-navbar :fixed="true" :shadow="navbar.shadow" :bgColor="navbar.bgColor"
                :leftIconColor="navbar.bgColor=='transparent'?'#fff':'#151C24'" @leftClick="back"
                title="考勤管理" :titleColor="navbar.bgColor=='transparent'?'#fff':'#151C24'"
                rightIcon="search" :rightIconColor="navbar.bgColor=='transparent'?'#fff':'#151C24'" @rightClick="rightClick">
            </u-navbar>
        </view>

        <!-- content -->
        <view class="uni-area">
            <!-- 今日考勤 -->
            <view class="uni-shadow today-kaoqin">
                <qiun-title-bar title="今日考勤" style="margin:-16rpx 0 0 -20rpx" />
                <view class="u-m-t-20 u-flex u-row-between u-p-l-30 u-p-r-30">
                    <view v-for="(item,index) in todayKaoqin" :key="index" class="u-flex u-flex-col ">
                        <text class="u-font-52 font-bold">{{item.value}}</text>
                        <text class="u-m-t-20 u-font-26">{{item.title}}</text>
                    </view>
                </view>
            </view>

            <!-- 应用功能 -->
            <view v-if="uses.usesShow" class="u-m-t-60 u-flex u-flex-wrap u-row-between u-p-l-40 u-p-r-40">
                <view v-for="(item,index) in uses.list" :key="index" @tap.stop="menuSkip(item)">
                    <u--image class="img" width="108rpx" height="108rpx" :src="item.icon"></u--image>
                    <view class="u-text-center u-font-26">{{item.title}}</view>
                </view>
            </view>

            <!-- 人员列表 -->
            <view class="u-m-t-60">
                <text class="u-font-32 font-bold">人员列表</text>
                <!-- 下拉筛选 -->
                <uni-select class="u-m-t-30" ref="uniselect" :selectData="selectData" @select="select"></uni-select>
                <!-- 列表 -->
                <uni-item-member-plus class="u-m-t-30" v-for="(tem,ind) in page.list" :key="ind"
                    :listItem="tem" @memberDetail="goKaoqin(tem)">
                </uni-item-member-plus>
            </view>

            <!-- 返回顶部 -->
            <u-back-top :scroll-top="page.scrollTop" top="600" @tap="toTop"></u-back-top>
            <!-- 加载更多 -->
            <u-loadmore :status="page.status" />
        </view>
    </view>
</template>

<script>
export default {
    data(){
        return{
            navbar:{
                bgColor: 'transparent',
                shadow: false,
            },
            // 用户信息
            userInfo: uni.getStorageSync("userInfo"), 
            parameter:{
                deptId: null, // 所属部门编号
                gcbh: null // 所属项目(工程)编号
            },
            // 今日考勤
            todayKaoqin:[
                { field:'unatdStaffs', title:'今日缺勤人数', value: 0 },
                { field:'staffs', title:'今日考勤人数', value: 0 },
                { field:'staffs', title:'总人数', value: 0 },
            ],
            // 应用功能
            uses:{
                usesShow: true,
                list:[
                    { icon:'/static/kaoqin/icon3.png', title:'区域设置', url:'/pages/kaoqin-bag/clockinArea-list' },
                    { icon:'/static/kaoqin/icon1.png', title:'考勤打卡', url:'/pages/kaoqin-bag/member-clockin' },
                    { icon:'/static/kaoqin/icon4.png', title:'补卡审核', url:'/pages/examine-bag/examine-list?type=buka' },
                    // { icon:'/static/kaoqin/icon2.png', title:'申请补卡', url:'' },
                ]
            },
            // 下拉选择数据
            selectData:[],
            selectPrameter:{
                smrz:'', // 人员是否认证【非必传】 
                ryzt:'', // 人员状态【非必传】
            },
            // 分页相关参数
            paging:{
                pageNum: 1,
                pageSize: this.$config.pageSize,
            },
            page:{
                scrollTop: 0,
                status: 'loadmore',
                total: 0,
                list: [], // 列表
            }
        }
    },

    onReady(){
    },

    // 页面滚动
    onPageScroll(e){
        if( e.scrollTop > 120 ){
            this.navbar.bgColor = '#21A5F3'
            this.navbar.shadow = true
        }else{
            this.navbar.bgColor = 'transparent'
            this.navbar.shadow = false
        }
        this.page.scrollTop = e.scrollTop
    },
    // 页面滚动到底部触发
    onReachBottom(){
        if( this.page.list.length < this.page.total ){
            this.paging.pageNum ++
            this.getMemberList()
        }else{
            this.page.status = 'nomore'
        }
    },


    onLoad(){
        this.parameter.deptId = this.userInfo.deptId,
        this.parameter.gcbh = this.userInfo.ssgcbh,
        // 今日考勤
        this.getHomeToday()
        // 权限判断
        this.jurisdiction()

        // 人员是否认证
        this.$tools.staffRenzhengFn(this,res=>{
            this.selectData.splice(0,1,res)
            this.selectPrameter.smrz = res.value
            // 人员状态 
            this.$tools.staffStatusFn(this,res=>{
                this.selectData.splice(1,1,res)
                this.selectPrameter.ryzt = res.value
                // 人员考勤列表
                this.getMemberList()
            })
        })
    },

    methods: {
        // 返回
        back(){
            uni.navigateBack()
        },
        // 搜索
        rightClick(){
            uni.navigateTo({ url: '/pages/common/search?type=kaoqin' })
        },


        // 今日考勤
        getHomeToday(){
            this.$request(this,this.$apis.HomeToday, this.parameter).then(res=>{
                // console.log('今日考勤',res)
                this.todayKaoqin.map((v,i)=>{
                    v.value = res[v.field]
                })
            }).then()
        },


        // 菜单权限判断
        jurisdiction(){
            // // console.log('用户信息',this.userInfo)
            if( this.userInfo.ssgcbh != -1 && this.userInfo.terminal == 'xmd' ){
                if( this.userInfo.role == 'lzry' || this.userInfo.role == 'xmjl' ){
                    this.usesShow = true
                }else{
                    this.usesShow = false
                }
            }else{
                this.usesShow = false
            }
        },
        // 菜单跳转
        menuSkip(item){
            if( this.userInfo.isStartYdkq == 1 ){
                let url = item.url
                if( item.title == '考勤打卡' ) url = '/pages/kaoqin-bag/member-clockin?bzbh='+ this.userInfo.ssbzbh+'&rybh='+this.userInfo.ssrybh
                uni.navigateTo({ url: url })
            }else{
                uni.$u.toast('当前项目未开通移动打卡')
            }
        },


        // 人员列表
        getMemberList(){
            this.page.status = 'loading'
            const parameter = Object.assign(this.parameter,this.paging,this.selectPrameter)
            this.$request(this,this.$apis.MemberList,parameter).then(res=>{
                // console.log('人员列表',res)
                this.page.total = res.total
                if( res.data && res.total != 0 ){
                    this.page.status = 'loadmore'
                    res.data.map((v,i)=>{
                        this.page.list.push(v)
                    })
                }else{
                    this.page.status = 'nomore'
                    uni.$u.toast('暂未查询到人员列表相关数据')
                }
            }).then()
        },
        // 查看员工打卡情况
        goKaoqin(tem){
            uni.navigateTo({ url: '/pages/kaoqin-bag/member-clockin?bzbh='+tem.bzid+'&rybh='+tem.id })
        },
        // 下拉选择筛选人员
        select(e){
            this.selectPrameter[e.type] = e.value
            this.paging.pageNum = 1
            this.page.list = []
            this.getMemberList()
        },


        // 回到顶部
        toTop(){
            uni.pageScrollTo({ scrollTop: 0 })
        },
    },
}
</script>

<style scoped lang="scss">
    .content{
        .bg{
            width: 100%;
            height: 336rpx;
            background: linear-gradient(131deg, #21A5F3 0%, #2BC4FE 100%);
            border-radius: 0 0 20rpx 20rpx;
        }
        // 今日考勤
        .today-kaoqin{
            background: $uni-text-color-inverse;
            margin-top: -120rpx;
        }
    }
</style>